<script setup>


// 控制弹层显示和隐藏的 ref
const isVisible = defineModel()
const hidePopup = () => {
  isVisible.value = false
}
</script>
<template>
  <teleport to="#app">
    <transition name="fade">
      <div
        @click="hidePopup"
        v-if="isVisible"
        class="background bg-zinc-900/80 z-50 fixed left-0 right-0 bottom-0 top-0"
      >
        <transition name="slide-up">
          <div
            @click.stop
            class="popup fixed left-0 right-0 bottom-0 bg-white p-3 max-h-96 overflow-y-auto"
          >
            <slot>
                666
            </slot>
          </div>
        </transition>
      </div>
    </transition>
  </teleport>
</template>

<style lang="scss" scoped>
/* 渐隐渐显动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0; /* 初始状态：透明 */
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1; /* 最终状态：完全显示 */
}
</style>
